<template>
    <view class="page">
        <headerline shownav=true isback="true" @tapnav="tapnav" :navstyle="navstyle" :navitem="navitem"
            :navselect="navselect" :statusbarheight='statusBarHeight'></headerline>


        <view v-if="navselect==0">

            <ul class="cardManage clearFix" id="_bankList" style="clear: both;margin-top: 10px;">


                <li class="bank_item" v-for="(value,index) in bank" :key='index'>
                    <dl>
                        <dd>
                            <span>姓名：{{value['realname']}}</span>
                        </dd>
                        <!-- <dd><span>SK Hynix账号：{{value['number']}}</span></dd> -->
                        <dd><span>银行卡号：{{value['number']}}</span></dd>
                    </dl>
                    <p class="bank_bottom">绑定时间：{{$action.timestampToTime(value['time'])}}<span></span></p>

                    <span class="bank_default" v-if="value.default==1">
                        <image src="../../static/img/bank_img.png" style="height:60px;width:60px;">
                    </span>

                </li>

            </ul>

            <div class="nodata" style="color: #666;clear: both;margin-top: 10px;text-align: center">

                <!-- 最多可以绑定<span style="color: #ff0000">{{system['bank_num']}}</span>张SK Hynix账号 -->
                最多可以绑定<span style="color: #ff0000">{{system['bank_num']}}</span>张银行账号

            </div>


        </view>


        <view v-else style="padding: 25rpx;">
            <view class="ni">
                <view class="ni_cell">
                    <view>姓名</view>
                    <view style="display: flex;align-items: center;">
                        <input placeholder="请输入" style="text-align: right; font-size: 30rpx;" v-model="realname"
                            :disabled="banklen>0" class="input1" />
                        <uni-icons type='arrowright' style="margin-top: 5rpx;" color="#333"></uni-icons>
                    </view>
                </view>
                <view class="ni_cell">
                    <!-- <view>SK Hynix账号</view> -->
                    <view>银行卡号</view>
                    <input style="text-align: right;font-size: 28rpx;" placeholder="请输入" name="banknum" id="banknum"
                        type="digit" v-model="banknum" class="input1">
                </view>
                <view class="ni_cell">
                    <view>备注</view>
                    <input style="text-align: right;font-size: 28rpx;" placeholder="请输入"
                        type="text" v-model="bei" class="input1">
                </view>
            </view>
        

            <view style="margin:15px auto;display:block;width: 100%;">
                <button class="button1" @tap="click_bind()">
                    绑 定
                </button>
            </view>
            <payment v-if="showpay" :tyxina="true" @tixian="pay" title="请输入支付密码" type="redpacket" :id="id" @close="showpay=false;"></payment>
        </view>
    </view>
</template>

<script>
    import api from "../../library/index.js"
    import headerline from '../../components/header.vue'
    import http from "../../library/http.js"
    import uniIcons from '../../components/uni-icons/uni-icons.vue'
    import address from '../../library/address.js'
    import payment from '@/components/payment.vue'
    var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
    export default {
        components: {
            uniIcons,
            headerline,
            payment
        },
        data() {
            return {
                bei:'',
                statusBarHeight: statusBarHeight + 'px',
                // navitem: ['我的账号', '新增SK Hynix号'],
                navitem: ['我的账号', '新增银行卡号'],
                navselect: 0,
                navstyle: "width:60%;left:20%",
                user: uni.getStorageSync('userInfo'),
                system: uni.getStorageSync('system'),
                bank: uni.getStorageSync('bank'),
                banklen: 0,
                banklist: uni.getStorageSync('banklist'),
                realname: '',
                default_arr: ['否', '是'],
                isdefault: 1,
                province: [],
                city: [],
                multiIndex: [0, 0],
                showpay:false,
                
                area: [
                    ['省份'],
                    ['城市']
                ],
                showarea: 0,
                provice1: '',
                city1: '',
                provice2: '',
                city2: '',
                c1: 0,
                c2: 0,
                item: {
                    'province': '省份',
                    'city': '城市'
                },
                bankname: '',
                banknum: '',
                pwd: '',
                mark: '',
                bankid: 0,

            }
        },
        methods: {
            pay(pwd){
               http.setWait(true).post('user.php?act=bank_add', {
                   userid: this.user.id,
                   bankname: this.bankname,
                   realname: this.realname,
                   banknum: this.banknum,
                   province: this.item.province,
                   city: this.item.city,
                   mark: this.mark,
                   default: this.isdefault,
                   pwd:pwd
               }).then(res => {
                   this.getbank();
                   this.navselect = 0
                   uni.showToast({
                       icon: 'none',
                       title: '绑定成功',
                       duration: 1000
                   })
               }) 
            },
            tapnav(num) {
                if (num == 0 && this.banklen == 0) {
                    uni.showToast({
                        // title: '您还没有绑定任何SK Hynix卡号',
                        title: '您还没有绑定任何银行卡号',
                        icon: 'none'
                    })
                } else {
                    if (this.banklen >= this.system['bank_num']) {
                        uni.showToast({
                            // title: '最多只能绑定' + this.system['bank_num'] + '个SK Hynix账号',
                            title: '最多只能绑定' + this.system['bank_num'] + '张银行卡号',
                            icon: 'none'
                        })
                    } else
                        this.navselect = num;
                }
            },
            binddefaultChange(e) {
                this.isdefault = e.target.value
            },
            bindbankChange(e) {
                var num = e.target.value;
                this.bankname = this.banklist[num]
                this.bankid = num;

            },
            getuserinfo() {
                var postdata = {
                    id: uni.getStorageSync('access_token')
                };
                http.setWait(false).post('user.php?act=userinfo', postdata).then(res => {
                    this.user = res.data;
                    uni.setStorageSync('userInfo', this.user)
                })

            },
            getbank() {
                var postdata = {
                    userid: uni.getStorageSync('access_token')
                };
                http.setWait(false).post('user.php?act=mybank', postdata).then(res => {
                    this.bank = res.data;

                    uni.setStorageSync('bank', this.bank)
                    if (res.num < 1) this.tapnav(1);
                    else {
                        this.realname = res.data[0].realname;
                        this.isdefault = 0;
                    }
                    this.banklen = res.num;
                    var banklist = [];


                    for (var ii in res.banklist) {
                        banklist.push(res.banklist[ii])
                    }
                    this.banklist = banklist;
                    uni.setStorageSync('banklist', banklist);
                    this.getuserinfo();

                })
            },
            click_bind() {
                console.log('打款',this.user.pwd,this.user.pwd1)
                if(!this.user.pwd1) {
                    uni.navigateTo({
                        url:'/pages/mine/password1?band=true'
                    })
                    return
                }
             

                var reglx = /^[\u0391-\uFFE5]+$/;
                if(!reglx.test(this.realname)){
                 uni.showToast({
                     title:'姓名只能包含中文',
                     icon:'none'
                 })
                    return false;
                }


                if (this.banknum == "") {
                    uni.showToast({
                        // title: '请输入SK Hynix账号',
                        title: '请输入银行账号',
                        icon: 'none'
                    })

                    return false;
                }
                var num = /^\d*$/;
                //全数字

                if (!num.exec(this.banknum)) {
                    uni.showToast({
                        // title: 'SK Hynix账号必须全为数字',
                        title: '账号必须全为数字',
                        icon: 'none'
                    })

                    return false;
                }
            
                if (this.$action.check_userlock() == false) return false;
                this.showpay = true
              

            },
            getuserinfo() {
                var postdata = {
                    id: uni.getStorageSync('access_token')
                };
                http.setWait(false).post('user.php?act=userinfo', postdata).then(res => {
                    this.user = res.data;
                    uni.setStorageSync('userInfo', this.user)
                })
            
            },

        },
        onLoad(opts) {
            this.getbank();
        },
        onShow() {
           if (uni.getStorageSync('access_token') > 0) {
               this.getuserinfo();
           
           } else {
               this.$jump('login.index');
           } 
        }
    }
</script>

<style lang="scss" scoped>
    @import "@/static/css/user.css";

    .page {
        background-color: #e5e5e5;
        min-height: 100vh;
    }


</style>